<template>
  <div>
    <div class="top">
      <p class="status">{{ orderInfo?.param?.orderStatusString }}</p>
      <p class="code">
        <img src="@/assets/images/code.png" />
        <span>微信关注"北京114预约挂号,快速预约挂号"</span>
      </p>
    </div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="就诊人信息">{{
            orderInfo?.patientName
          }}</el-descriptions-item>
          <el-descriptions-item label="就诊日期">{{ orderInfo?.fetchTime }}</el-descriptions-item>
          <el-descriptions-item label="就诊医院">{{ orderInfo?.hosname }}</el-descriptions-item>
          <el-descriptions-item label="就诊科室">{{ orderInfo?.depname }}</el-descriptions-item>
          <el-descriptions-item label="医生职称">{{ orderInfo?.title }}</el-descriptions-item>
          <el-descriptions-item label="医生服务费">{{ orderInfo?.amount }}</el-descriptions-item>
          <el-descriptions-item label="挂号单号">{{ orderInfo?.scheduleId }}</el-descriptions-item>
          <el-descriptions-item label="挂号时间">{{ orderInfo?.createTime }}</el-descriptions-item>
        </el-descriptions>
        <div class="btn_div">
          <el-button
            v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1"
            @click="cancelOrdering"
            >取消预约</el-button
          >
          <el-button v-if="orderInfo.orderStatus == 0" type="primary" @click="handlePay"
            >支付</el-button
          >
        </div>
      </el-col>
      <el-col :span="12">
        <div class="tip-div">
          <p class="tip-title">注意事项</p>
          <p class="info">1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担;</p>
          <p class="info important">
            2.【取号】就诊当天需在{{ orderInfo?.fetchTime }}前
            在医院取号，未取号视为爽约，该号不退不换;
          </p>
          <p class="info">
            3.【退号】在{{ orderInfo?.quitTime }}前可在线退号，逾期将不可办理退号退费;
          </p>
          <p class="info">
            4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号:
          </p>
          <p class="info">5.请注意北京市医保患省在住院期间不能使用社保卡在门诊取号</p>
        </div>
      </el-col>
    </el-row>
    <PayDialog
      ref="payRef"
      v-model="showPay"
      @close="showPay = false"
      @success="$emit('getDetail')" />
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reqCancelOrder } from '@/api/order'
import PayDialog from './../pay/index.vue'

const $emit = defineEmits(['getDetail'])
const $props = defineProps({
  orderInfo: {
    type: Object,
    default: () => ({})
  }
})
let payRef = ref()
let showPay = ref(false)
const cancelOrdering = async () => {
  await ElMessageBox.confirm('确定取消预约吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await reqCancelOrder($props.orderInfo.id)
  ElMessage.success('取消成功')
  $emit('getDetail')
}
const handlePay = () => {
  showPay.value = true
  nextTick(() => {
    payRef.value.getCode($props.orderInfo.id)
  })
}
</script>

<style lang="scss" scoped>
.top {
  border-bottom: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  margin-bottom: 20px;
  margin-top: -10px;
  .status {
    background-color: green;
    border-radius: 4px;
    line-height: 26px;
    font-size: 14px;
    padding: 0 10px;
    color: #fff;
  }
  .code {
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      margin-right: 5px;
    }
  }
}
.tip-div {
  border: 1px solid #efefef;
  padding-bottom: 20px;
  .tip-title {
    line-height: 40px;
    padding-left: 10px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 1px solid #efefef;
  }
  .info {
    padding: 0 15px;
    font-size: 14px;
    line-height: 25px;
    color: #666;
    &.important {
      color: red;
    }
  }
}
.btn_div {
  margin-top: 15px;
}
</style>
